<template>
	<div class="header">
		<div class="title">
			信易加后台管理系统
		</div>
		<div class="headerImg">
			  <el-tooltip effect="light" popper-class="dialog">
			    <template #content>
					<div>
						账号设置
					</div>
					<hr />
					<div @click='loginOut'>
						退出登录
					</div>
				</template>
				<img src="../../public/img/header.jpg" alt="" />
			  </el-tooltip>
		</div>
	</div>
</template>

<script>
	export default{
		
		
		/**
		 * 静态方法
		 */
		methods: {
			loginOut(){
				
				//清空token
				window.localStorage.clear('token')
				//跳转至登录页
				this.$router.replace('/')
				
			}
		}
	}
</script>
 
<style scoped>
	.header{
		width: 100%;
		height: 80px;
		display: flex;
	}
	.title{
		width: 250px;
		height: 100%;
		background-color: #2c72e7;
		color: #fff;
		font-size: 20px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: default; 
	}
	.headerImg{
		flex-grow: 1;
		height: 100%;
		background-color: #307dff;
		display: flex;
		justify-content: end;
		align-items: center;
		padding-right: 50px;
	}
	.headerImg>img{
		width: 50px;
		height: 50px;
		border-radius: 25px;
		cursor: pointer;
	}
	
	.dialog div{
		cursor: pointer;
	}
	
</style>